<template>
  <base-breadcrumb>
    <div v-loading="loading">
      <a-card :bordered="false">
        <title-name title="基础信息" />

        <a-row :gutter="24">
          <a-col span="8">
            <a-form-item
              label="项目名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="projectName" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="分包商名称"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="subcontractorName" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核时间"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <div style="display:flex;">
                <a-month-picker
                  v-model="dels.assessmentTime"
                  placeholder=""
                  style="flex:1;"
                  @change="assessmentTimes"
                />
                <a-button type="primary" @click="searchData">确定</a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col span="8">
            <a-form-item
              label="考核总分"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentScore" disabled />
            </a-form-item>
          </a-col>
          <a-col span="8">
            <a-form-item
              label="考核等级"
              :label-col="{ lg: { span: 7 }, sm: { span: 7 } }"
              :wrapper-col="{ lg: { span: 17 }, sm: { span: 17 } }"
            >
              <BaseInput v-model="dels.assessmentLevel" disabled />
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>

      <a-card style="margin-top: 20px">
        <title-name title="考核信息" />

        <!--<div style="margin-bottom: 20px">-->
        <!--<a-button type="primary">导出</a-button>-->
        <!--</div>-->

        <!--打印-->
        <print-button
          :print-content="htmlData"
          :before-print-fn="getMothAssessmentDoc"
          style="margin-bottom: 20px"
        />

        <!--<div class="pub-table-select-count">-->
        <!--<a-icon type="info-circle" theme="twoTone"/>-->
        <!--<span style="margin-right: 12px"> 考核中内容：<span class="totalNum">{{totalDels.contentNum}} 个</span> |  已考核：<span class="totalNum">{{totalDels.assessedNum}} 个</span> |  未考核：<span class="totalNum">{{totalDels.unAssessedNum}} 个</span> </span>-->
        <!--</div>-->

        <a-table
          bordered
          :pagination="false"
          :columns="columns"
          :data-source="data"
        >
          <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
          <template
            :slot="scoreIndex1"
            slot-scope="text, record,index"
          >
            <span v-if="record[scoreIndex1] == undefined || record[scoreIndex2] == undefined" />
            <span v-if="record[scoreIndex1] != undefined ">{{ record[scoreIndex1] }}</span>
          </template>
          <template
            :slot="scoreIndex2"
            slot-scope="text, record,index"
          >
          <span
            v-if="record[scoreIndex2] == undefined"
            class="notScore"
          >未评分 <img
            width="20px"
            height="20px"
            src="../../../assets/icons/notScore.png"
          ></span>
            <span v-if="record[scoreIndex2] != undefined ">{{ record[scoreIndex2] }}</span>
          </template>
          <template
            :slot="scoreIndex3"
            slot-scope="text, record,index"
          >
            <ellipsis
              :length="40"
              tooltip
            >
              {{ text }}
            </ellipsis>
          </template>
          <template
            :slot="scoreIndex4"
            slot-scope="text, record,index"
          >
            <ellipsis :length="40" tooltip>{{ text }}</ellipsis>
          </template>
          <template
            :slot="scoreIndex"
            slot-scope="text, record,index"
          >
            <span v-if="record[scoreIndex] == undefined ">无</span>
            <span v-if="record[scoreIndex] != undefined ">{{ record[scoreIndex] }}</span>


            <a-popover v-if="record['commonId']" placement="top">
              <template slot="content">
                <a
                  :href="'/api/ycloud-file-center/oper/download?access_token=' + token + '&fileId=' + getFile(record).fileId"
                  target="_self"
                >下载</a>
                <a-divider type="vertical" />
                <a @click="$filePreview(getFile(record))">查看</a>
              </template>
              <a-button size="small" type="link">{{ getFile(record).fileName }}</a-button>
            </a-popover>

            <!--            <span @click="$filePreview(getFile(record))" v-if="record['commonId']">{{ getFile(record).fileName }}</span>-->
          </template>
        </a-table>
      </a-card>

      <div class="page-btn-right-top">
        <a-button
          type="primary"
          @click="$close"
        >
          关闭
        </a-button>
      </div>
    </div>
  </base-breadcrumb>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import {
  getMonthHeaders,
  getMonthContent,
  getMonthAssessmentTime,
  getMothAssessmentDoc
} from '@/api/subcontractors/monthAssessment'
import printButton from '@/components/BasePrintButton'
import ARow from 'ant-design-vue/es/grid/Row'
import Vue from 'vue'

export default {
  name: 'a' + Date.now(),
  components: {
    ARow,
    printButton,
    Ellipsis
  },
  data() {
    return {
      htmlData: '',
      isShow: false,
      loading: false,

      data: [],
      columns: [],
      totalDels: {},
      dels: {},

      scoreIndex: '',  // 实际评分的dataIndex
      scoreIndex1: '', // 实际考核人员的dataIndex
      scoreIndex2: '', // 状态的dataIndex

      scoreIndex3: '', // 扣分标准的dataIndex
      scoreIndex4: '', // 主要检查的dataIndex

      assessmentId: '',
      assessmentTime: '',
      projectName: this.$route.query.projectName,
      subcontractorName: this.$route.query.subcontractorName,
      loginName: '',
      token: ''
    }
  },

  created() {
    this.token = Vue.getAcloudProvider().getAccessToken()
    this.assessmentId = this.$route.query.assessmentId
    this.loginName = JSON.parse(sessionStorage.getItem('ycloud-user_info')).name
    this.getMonthAssessmentTimeReq()
    // this.getMothAssessmentDoc()
    // this.getMonthDetailsTotal()  // 统计

    this.getData()
  },
  computed: {},
  methods: {
    getFile(row) {
      try {
        if (row['commonId']) {
          return JSON.parse(row['commonId'])
        }
      } catch (e) {
        return { fileName: '' }
      }
    },
    // 考核时间搜索
    async searchData() {
      let data = { subcontractorId: this.dels.subcontractorId, assessmentTime: this.dels.assessmentTime }
      this.loading = true
      await this.getMonthContent(data)
      if (this.dels.id) {
        await this.getMonthHeaders({ id: this.dels.id })
      } else {
        this.$noticeWarning('没有查询到数据')
      }
      this.loading = false
    },
    async getData(data = { id: this.assessmentId }) {
      this.loading = true
      await this.getMonthContent(data)
      await this.getMonthHeaders(data)
      this.loading = false
    },
    getMothAssessmentDoc() {
      let that = this
      return new Promise((resolve, reject) => {
        let data = { templateCode: 'CSCEC8B-SU-B10108', businessId: this.assessmentId }
        getMothAssessmentDoc(data).then(res => {
          if (res.code == 200 || res.data.code === 200) {
            resolve(res.data.content)
          }
        }).catch((e) => {
          that.$message.error(e)
        }).finally(() => {
          resolve()
        })
      })

    },
    // 查询表头
    async getMonthHeaders(data = { id: this.assessmentId }) {
      let that = this
      let res = await getMonthHeaders(data)
      if (res.code === 200) {
        that.columns = res.data
        let obj = {
          'dataIndex': 'serial',
          'formId': null,
          'title': '序号',
          'code': '0',
          'sort': 0,
          'inputType': null,
          scopedSlots: { customRender: 'serial' }
        }
        that.columns.unshift(obj)

        let objScore = {}   // 实际评分
        let objScore1 = {}   // 实际考核人员
        let objScore2 = {}   // 状态

        let objScore3 = {}   // 扣分标准
        let objScore4 = {}   // 主要检查内容

        this.columns.forEach(function(objs, i) {
          objScore = that.columns.filter(item => item.title == '实际评分')
          objScore1 = that.columns.filter(item => item.title == '实际考核人员')
          objScore2 = that.columns.filter(item => item.title == '状态')

          objScore3 = that.columns.filter(item => item.title == '扣分标准')
          objScore4 = that.columns.filter(item => item.title == '主要检查内容')
        })
        objScore[0].scopedSlots = { customRender: objScore[0].dataIndex }
        objScore1[0].scopedSlots = { customRender: objScore1[0].dataIndex }
        objScore2[0].scopedSlots = { customRender: objScore2[0].dataIndex }
        objScore3[0].scopedSlots = { customRender: objScore3[0].dataIndex }
        objScore4[0].scopedSlots = { customRender: objScore4[0].dataIndex }

        that.scoreIndex = objScore[0].dataIndex
        that.scoreIndex1 = objScore1[0].dataIndex
        that.scoreIndex2 = objScore2[0].dataIndex
        that.scoreIndex3 = objScore3[0].dataIndex
        that.scoreIndex4 = objScore4[0].dataIndex
      }
    },
    // 查询内容
    async getMonthContent(data = { id: this.assessmentId }) {
      let res = await getMonthContent(data)
      if (res.code === 200) {
        this.data = res.data.list
        this.dels = res.data
      }
    },

    // 查询考核时间
    getMonthAssessmentTimeReq() {
      getMonthAssessmentTime({ subcontractorId: this.assessmentId }).then(res => {
        console.log('月度考核时间：', res.data)
      })
    },

    // 格式化时间
    assessmentTimes(val) {
      this.dels.assessmentTime = val.format('YYYY-MM')
    }
  }
}
</script>
<style scoped>
.notScore {
  width: 65px;
  display: flex
}
</style>

